import React, { Component } from 'react';
import {
  StyleSheet, View, Alert, Dimensions, Image, DeviceEventEmitter,
} from 'react-native';
import { Text, Textarea } from 'native-base';
import { UtilToast } from '../../../../utils/util-method';

import Theme from '../../../../native-base-theme/variables/commonColor';

import * as incidentServer from '../../../../services/incidentRequest';

const deviceWidth = Dimensions.get('window').width;
class SendBack extends Component {
  constructor(props) {
    super(props);
    this.state = {
      description: '',
    };
  }

  _showAlert = () => {
    Alert.alert(
      '提示',
      '是否退回',
      [
        {
          text: '否',
          style: 'cancel',
          onPress: () => {
          },
        },
        {
          text: '是',
          onPress: () => {
            this._sendBack();
          },
        },
      ],
    );
  }

  /**
   * 维修人员退回(before 2018.12.4 退回到待接受)
   * after 2018.12.4 退回到申报
  */
  _sendBack = async () => {
    try {
      let query = {
        failureId: this.props.id,
        stepCode: '05', // 接口的步骤编码
        description: this.state.description,
      };
      query = Object.assign(query, this.props.mobileInfo);
      DeviceEventEmitter.emit('showLoading', true);
      const resp = await incidentServer.incidentHandle(query);
      DeviceEventEmitter.emit('showLoading', false);
      this._handleServerResponse(resp);
    } catch (error) {
      console.log('维修人退回异常:', error);
    }
  }

  _handleServerResponse = (resp) => {
    if (resp.resultCode == '0') { // 状态码成功
      UtilToast('退回成功', 'success');
      // Toast.show({
      //   type: 'success',
      //   text: '退回成功',
      //   duration: 1000,
      //   position: 'bottom',
      // });
    } else {
      UtilToast(resp.resultMsg || '退回失败，请重试', 'danger');
      // Toast.show({
      //   type: 'danger',
      //   text: resp.resultMsg || '退回失败，请重试',
      //   duration: 1000,
      //   position: 'bottom',
      // });
    }
    this.props.back();
  }

  render() {
    return (
      <View style={styles.conatiner}>
        <View>
          <Text style={[styles.leftContent, styles.textFont]}>退回意见</Text>
          <Textarea
            rowSpan={6}
            bordered
            style={[styles.textAreaStyle]}
            placeholder="请输入退回意见"
            value={this.state.description}
            onChangeText={(description) => this.setState({ description })}
          />
        </View>
        <View>
          <Image
            source={require('../../../../../assets/images/btn-cut-line-xxx.png')}
            style={{ width: deviceWidth, height: 2, alignItems: 'center' }}
            resizeMode="stretch"
            resizeMethod="auto"
          />
          <View style={styles.oneItem}>
            <Text style={[styles.submitBtn, styles.textFont]} onPress={() => this._showAlert()}>
              退回
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  conatiner: {
    backgroundColor: Theme.myPrimary,
    display: 'flex',
    flex: 1,
    color: '#ffffff',
    justifyContent: 'space-between',
  },
  textFont: {
    color: '#ffffff',
  },
  oneItem: {
    display: 'flex',
    flexDirection: 'row',
    paddingTop: 5,
    paddingBottom: 5,
  },
  leftContent: {
    paddingLeft: 20,
    width: '35%',
  },
  rightContent: {
    paddingRight: 20,
    width: '65%',
  },
  textAreaStyle: {
    borderColor: '#ffffff',
    backgroundColor: '#ffffff',
    marginLeft: 20,
    marginRight: 20,
    borderRadius: 8,
  },
  submitBtn: {
    textAlign: 'center',
    backgroundColor: Theme.myPrimary,
    flex: 1,
    paddingTop: 15,
    paddingBottom: 15,
  },
});

export default SendBack;
